<span id="online-count" hx-swap-oob="outerHTML" class="fade-in-scale pr-1">
    {{ online_count }}
    <style>
        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(4); }
            to { opacity: 1; transform: scale(1); }
        }
        .fade-in-scale {
            animation: fadeInScale 0.6s ease;
        }
    </style> 
</span>

{% if online_count %}
<div id="online-icon" class="green-dot absolute top-2 left-2"></div>
{% else %}
<div id="online-icon" class="gray-dot absolute top-2 left-2"></div>
{% endif %}


<ul id="groupchat-members" class="flex gap-4">
    {% for member in chat_group.members.all %}
    <li>
        <a href="{% url 'profile' member.username %}" class="flex flex-col text-gray-400 items-center justify-center w-20 gap-2">
            <div class="relative">
                {% if member in chat_group.users_online.all %}
                <div class="green-dot border-2 border-gray-800 absolute bottom-0 right-0"></div>
                {% else %}
                <div class="gray-dot border-2 border-gray-800 absolute bottom-0 right-0"></div>
                {% endif %}
                <img src="{{ member.profile.avatar }}" class="w-14 h-14 rounded-full object-cover" />
            </div>
            {{ member.profile.name|slice:":10" }}
        </a>
    </li>
    {% endfor %}
</ul>



{% for user in users %}
    {% if user in chat_group.users_online.all %}
    <div id="user-{{ user.id }}" class="green-dot border-2 border-gray-800 absolute -bottom-1 -right-1"></div>
    {% else %}
    <div id="user-{{ user.id }}" class="gray-dot border-2 border-gray-800 absolute -bottom-1 -right-1"></div>
    {% endif %}
{% endfor %}
